<template>
  <div>
    <el-upload
    :action="uploadFileUrl"
    list-type="picture-card"
    :limit="limitCountImg"
    :class="{ uploadIconOne: showImg, uploadIcon: noneUploadImg }"
    :file-list="fileList"
    file="file"
    :before-upload="handleBeforeUpload"
    :on-change="uploadImgChange"
    :on-success="handleUploadSuccess"
    :headers="headers"
    >
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{ file }">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url"
        alt=""
      />
      <span class="el-upload-list__item-actions">
<!--                  <span-->
<!--                    class="el-upload-list__item-preview"-->
<!--                    @click="handlePictureCardPreview(file)"-->
<!--                  >-->
<!--                    <i class="el-icon-zoom-in"></i>-->
<!--                  </span>-->

                  <span
                    class="el-upload-list__item-delete"
                    @click="handleDeleteImgRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
    </div>
    </el-upload>
    <el-dialog :visible.sync="imgDialog">
      <img width="400px" :src="form.imageUrl" alt=""/>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  props: {
    value: [String, Object, Array],
    fileType: {
      type: Array,
      default: () => ["png", "jpg", "jpeg"],
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
  },
  data(){
    return {
      form:{
        imageUrl:'',
      },
      showImg: true,
      noneUploadImg: false,
      fileList: [],
      needfile: {},
      limitCountImg: 1,
      imgDialog: false,
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/infra/file/upload",
      headers: { Authorization: "Bearer " + getToken() },
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          const list = Array.isArray(val) ? val :  Array.isArray(this.value.split(',')) ? this.value.split(','): Array.of(this.value);
          this.fileList = list.map(item => {
            if (typeof item === "string") {
              item = { name: item, url: item };
            }
            return item;
          });
          this.noneUploadImg = true;
        } else {
          this.fileList = [];
          return [];
          this.noneUploadImg = false;
        }
      },
      deep: true,
      immediate: true
    }
  },
   methods:{
     // 上传成功回调
     handleUploadSuccess(res) {
       this.$emit("input", res.data.url);
       this.$modal.closeLoading();
     },
     // 上传前loading加载
     handleBeforeUpload(file) {
       let isImg = false;
       if (this.fileType.length) {
         let fileExtension = "";
         if (file.name.lastIndexOf(".") > -1) {
           fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
         }
         isImg = this.fileType.some(type => {
           if (file.type.indexOf(type) > -1) return true;
           return !!(fileExtension && fileExtension.indexOf(type) > -1);
         });
       } else {
         isImg = file.type.indexOf("image") > -1;
       }

       if (!isImg) {
         this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
         return false;
       }
       if (this.fileSize) {
         const isLt = file.size / 1024 / 1024 < this.fileSize;
         if (!isLt) {
           this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
           return false;
         }
       }
       this.$modal.loading("正在上传图片，请稍候...");
       this.number++;
     },

     handlePictureCardPreview(file) {
       this.form.imageUrl = file.url;
       this.imgDialog = true;
     },
     // 判断数量，是否显示上传icon
     uploadImgChange(file, fileList) {
       this.needfile = file.raw;
       this.noneUploadImg = fileList.length >= this.limitCountImg;
     },
     // 删除图片，判断数量，是否显示icon
     handleDeleteImgRemove(file) {
       this.fileList = [];
       this.needfile = {};
       this.noneUploadImg = false;
       this.$emit("input", '');
     },
   }
};
</script>
<style scoped lang="scss">
::v-deep .el-upload-list__item {
  width: 90px;
  height: 90px;
}
::v-deep .el-upload--picture-card {
  width: 90px;
  height: 90px;
  line-height: 100px;
}

::v-deep .el-upload-list__item {
  margin: 0;
}


.uploadIcon ::v-deep .el-upload--picture-card {
  display: none !important;
}

::v-deep.hide .el-upload--picture-card {
  display: none;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
  transition: all 0s;
}

::v-deep .el-list-enter, .el-list-leave-active {
  opacity: 0;
  transform: translateY(0);
}
</style>
